<template>
  <el-tabs v-model="activeName" type="card" class="demo-tabs xia " @tab-click="handleClick">
    <el-tab-pane label="音乐专区" :name="first">
      <el-row :gutter="5" style="float: left;" v-for="item in item.data">
          <el-col :span="4.3">
            <el-avatar shape="square" :size="100" :fit="fit" :src='item.imgUrl' style="width:212px;height: 100px;" />
          </el-col>
          <el-col :span="5">
            <div class="yidong">
              <p style="font-weight: bold; height: 25px;">{{ item.itemName }}</p>
              <p> {{ item.startDate }}-{{ item.endDate }}</p>
              <p>{{ item.areaName }}</p>
              <p>¥ {{ item.minPrice }}起</p>
            </div>
          </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="舞蹈专区" name="second">
      <el-row :gutter="5" style="float: left;" v-for="item in item1.data">
          <el-col :span="4.3">
            <el-avatar shape="square" :size="100" :fit="fit" :src='item.imgUrl' style="width:212px;height: 100px;" />
          </el-col>
          <el-col :span="5">
            <div class="yidong">
              <p style="font-weight: bold; height: 25px;">{{ item.itemName }}</p>
              <p> {{ item.startDate }}-{{ item.endDate }}</p>
              <p>{{ item.areaName }}</p>
              <p>¥ {{ item.minPrice }}起</p>
            </div>
          </el-col>
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { reactive } from 'vue'
import { postMultipleGetParentChild } from '../../utils/api'
const item = reactive({ data: [] });
async function search() {
  let { data } = await postMultipleGetParentChild();
  item.data.length = 0;
  item.data.push(...data.data);
}
search();

const item1 = reactive({ data: [] });
async function search1() {
  let { data } = await postMultipleGetParentChild();
  item1.data.length = 0;
  item1.data.push(...data.data);
}
search1();
</script>
<style scoped>
.xia {
  margin-top: 30px;
}

p {
  font-size: 12px;
  height: 13px;
  width: 156px;
}

p:first{
  height: 20px;
}

.yidong {
  margin-top: -10px;
  width: 180px;
}
</style>